<template>
	<div class="editor-container">
		<Toolbar :editor="editorRef" :mode="mode" />
		<Editor
			:mode="mode"
			:defaultConfig="state.editorConfig"
			:style="{ height }"
			v-model="state.editorVal"
			@onCreated="handleCreated"
			@onChange="handleChange"
		/>
	</div>
</template>

<script setup lang="ts" name="wangEditor">
import { reactive, shallowRef, watch, onBeforeUnmount } from "vue";
import { IDomEditor } from "@wangeditor/editor";
import { Toolbar, Editor } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";

// 定义父组件传过来的值
interface wangEditorProps {
	getHtml?: string; // 双向绑定，用于获取 editor.getHtml()
	getText?: string; // 双向绑定，用于获取 editor.getText()
	mode?: "default" | "simple"; // https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
	height?: string; // 高度
	disable?: boolean; // 是否禁用
	placeholder?: string; // 内容框默认的 placeholder
}
const props = withDefaults(defineProps<wangEditorProps>(), {
	getHtml: "",
	getText: "",
	mode: "default",
	height: "310px",
	disable: false,
	placeholder: "请输入内容...",
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(["update:getHtml", "update:getText"]);

// 定义变量内容
const editorRef = shallowRef();
const state = reactive({
	editorConfig: {
		placeholder: props.placeholder,
	},
	editorVal: props.getHtml,
});

// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
	editorRef.value = editor;
};
// 编辑器内容改变时
const handleChange = (editor: IDomEditor) => {
	emit("update:getHtml", editor.getHtml());
	emit("update:getText", editor.getText());
};
// 页面销毁时
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});
// 监听是否禁用改变
watch(
	() => props.disable,
	bool => {
		const editor = editorRef.value;
		if (editor == null) return;
		bool ? editor.disable() : editor.enable();
	},
	{
		deep: true,
	}
);
</script>
